$(function () {
  // ✅ 变量定义要写到最前面，把常用颜色封装成变量，方便使用
  const fontColor = '#4C9BFD'
  const gradienColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#00FAF9' },
    { offset: 1, color: '#0061CA' },
  ])

  // 🧨🧨调用封装的图表函数
  pointChart()
  userChart()
  sellChart()
  progressChart()
  migrateChart()
  /* 
    ✅ 把每个图表代码用函数封装起来的好处：
      1. 变量 myChart option 不会和其他函数变量冲突。
      2. 函数在编辑器中可以折叠起来，更方便后期维护查找。
  */
  /* 模块3：点位分布 - 饼图 */
  function pointChart() {
    // 初始化图表对象
    const myChart = echarts.init(document.querySelector('.point_chart'))
    // 准备图表配置
    const option = {
      color: [
        '#006cff',
        '#60cda0',
        '#ed8884',
        '#ff9f7f',
        '#0096ff',
        '#9fe6b8',
        '#32c5e9',
        '#1d9dff',
      ],
      series: [
        {
          type: 'pie',
          radius: [10, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          data: [
            { value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' },
          ],
        },
      ],
    }
    // 应用图表的配置
    myChart.setOption(option)
  }

  /* 模块5：用户统计 - 柱状图 */
  function userChart() {
    const item = { value: 1200, itemStyle: { color: '#254065' } }
    // 3.1 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.user_chart'))
    // 3.2 🚩 指定图表的配置项和数据
    const option = {
      // 配置图表上下左右留白
      grid: { left: 0, top: 10, right: 0, bottom: 0, containLabel: true },
      // X 轴配置
      xAxis: {
        // X轴刻度标签(文字颜色)
        axisLabel: { color: fontColor },
        // X轴轴线
        axisLine: { show: true, lineStyle: { color: '#006F81' } },
        data: [
          '上海',
          '广州',
          '北京',
          '深圳',
          '合肥',
          '',
          '......',
          '',
          '杭州',
          '厦门',
          '济南',
          '成都',
          '重庆',
        ],
      },
      yAxis: {
        // Y轴刻度标签(文字颜色)
        axisLabel: { color: fontColor },
        // Y轴轴线
        axisLine: { show: true, lineStyle: { color: '#006F81' } },
        // 横过来的分隔线
        splitLine: { show: true, lineStyle: { color: '#006F81' } },
      },
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            color: gradienColor,
          },
          data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
        },
      ],
    }
    // 3.3 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  /* 模块7：销售额统计 - 折线图 */
  function sellChart() {
    // 定义一个变量，用于控制 选中状态 和 数据的切换
    let index = 0
    // 注意点1：折线图数据量比较多，处理的时候一定要注意
    const dataAll = [
      {
        // 预期销售额数据
        expect: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        // 实际销售额数据
        actual: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
      {
        expect: [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        actual: [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
      },
      {
        expect: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        actual: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
      },
      {
        expect: [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        actual: [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
      },
    ]
    // 3.1 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.sell_chart'))
    // 3.2 🚩 指定图表的配置项和数据

    // 把创建图表的过程封装成函数
    function initChart() {
      const option = {
        // 标题
        title: {
          // 副标题文本
          subtext: '单位:万元',
          top: -10,
          left: 30,
          subtextStyle: {
            color: fontColor,
          },
        },
        // 图例说明
        legend: {
          data: ['预期销售额', '实际销售额'],
          right: 0,
          textStyle: {
            color: fontColor,
          },
        },
        // 🧨 记得设置网格大小
        grid: { left: 0, right: 15, top: 30, bottom: 0, containLabel: true },
        // x 轴
        xAxis: {
          // X轴刻度标签(文字颜色)
          axisLabel: { color: fontColor },
          // X轴轴线
          axisLine: { show: true, lineStyle: { color: '#006F81' } },
          // 折线左右是否留白
          boundaryGap: false,
          // x轴的名称
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        },
        // y 轴 - 必填属性，必须保留，柱状图中如果删除掉会报错
        yAxis: {
          // Y轴刻度标签(文字颜色)
          axisLabel: { color: fontColor },
          // Y轴轴线
          axisLine: { show: true, lineStyle: { color: '#006F81' } },
          // 横过来的分隔线
          splitLine: { show: true, lineStyle: { color: '#006F81' } },
        },
        // 系列图表
        series: [
          {
            name: '预期销售额',
            type: 'line',
            data: dataAll[index].expect,
            itemStyle: { color: '#00DCDF' },
            smooth: true,
          },
          {
            name: '实际销售额',
            type: 'line',
            data: dataAll[index].actual,
            smooth: true,
            itemStyle: { color: '#f00' },
          },
        ],
      }
      // 3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    // 根据初始配置，调用一次
    initChart()

    // 准备一个定时器
    setInterval(() => {
      // 定时让索引累加
      index++
      // 注意边界判断，如果超过 3，就从 0 开始
      if (index > 3) {
        index = 0
      }
      console.log(index)
      // 通过 JQ 选择器动起来
      $('.sell_date li').eq(index).addClass('active').siblings().removeClass('active')
      // 定时器调用，根据新的配置，切换图表内容
      initChart()
    }, 2000)
  }

  /* 模块9：销售进度 - 饼图 */
  function progressChart() {
    const myChart = echarts.init(document.querySelector('.progress_chart'))
    const option = {
      color: [
        '#12274D',
        'transparent',
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00FAF9' },
          { offset: 1, color: '#0061CA' },
        ]),
      ],
      series: [
        {
          // 类型：饼图
          type: 'pie',
          // 半径，设置两个半径，第一个为空心半径
          radius: [54, 62],
          // 饼图数据
          data: [
            { value: 1, name: '' },
            { value: 2, name: '' },
            { value: 1, name: '' },
          ],
          center: ['50%', '80%'],
          labelLine: {
            show: false,
          },
        },
      ],
    }
    myChart.setOption(option)
  }

  /* 模块4：迁徙图  */
  function migrateChart() {
    var chinaGeoCoordMap = {
      福建: [119.4543, 25.9222],
      泉州: [118.4543, 25.0222],
      大庆: [126.9688, 45.868],
      内蒙古: [110.3467, 41.4899],
      吉林: [125.8154, 44.2584],
      北京: [116.4551, 40.2539],
      辽宁: [123.1238, 42.1216],
      河北: [114.4995, 38.1006],
      天津: [117.4219, 39.4189],
      山西: [112.3352, 37.9413],
      陕西: [109.1162, 34.2004],
      甘肃: [103.5901, 36.3043],
      宁夏: [106.3586, 38.1775],
      青海: [101.4038, 36.8207],
      新疆: [87.9236, 43.5883],
      西藏: [91.11, 29.97],
      四川: [103.9526, 30.7617],
      重庆: [108.384366, 30.439702],
      山东: [117.1582, 36.8701],
      河南: [113.4668, 34.6234],
      江苏: [118.8062, 31.9208],
      安徽: [117.29, 32.0581],
      湖北: [114.3896, 30.6628],
      浙江: [119.5313, 29.8773],
      黑龙江: [127.9688, 45.368],
      江西: [116.0046, 28.6633],
      湖南: [113.0823, 28.2568],
      贵州: [106.6992, 26.7682],
      云南: [102.9199, 25.4663],
      广东: [113.12244, 23.009505],
      广西: [108.479, 23.1152],
      海南: [110.3893, 19.8516],
      上海: [121.4648, 31.2891],
    }
    var chinaDatas = [
      [
        {
          name: '黑龙江',
          value: 1,
        },
      ],
      [
        {
          name: '内蒙古',
          value: 0.12,
        },
      ],
      [
        {
          name: '吉林',
          value: 0.89,
        },
      ],
      [
        {
          name: '辽宁',
          value: 0.86,
        },
      ],
      [
        {
          name: '河北',
          value: 0.88,
        },
      ],
      [
        {
          name: '北京',
          value: 0.83,
        },
      ],
      [
        {
          name: '天津',
          value: 0.71,
        },
      ],
      [
        {
          name: '山西',
          value: 0.63,
        },
      ],
      [
        {
          name: '陕西',
          value: 0.56,
        },
      ],
      [
        {
          name: '宁夏',
          value: 0.17,
        },
      ],
      [
        {
          name: '云南',
          value: 0.11,
        },
      ],
      [
        {
          name: '四川',
          value: 1,
        },
      ],
      [
        {
          name: '重庆',
          value: 0.8,
        },
      ],
      [
        {
          name: '山东',
          value: 0.77,
        },
      ],
      [
        {
          name: '河南',
          value: 0.75,
        },
      ],
      [
        {
          name: '江苏',
          value: 0.88,
        },
      ],
      [
        {
          name: '安徽',
          value: 0.73,
        },
      ],
      [
        {
          name: '湖北',
          value: 0.75,
        },
      ],
      [
        {
          name: '浙江',
          value: 0.82,
        },
      ],
      [
        {
          name: '福建',
          value: 0.67,
        },
      ],
      [
        {
          name: '江西',
          value: 0.71,
        },
      ],
      [
        {
          name: '湖南',
          value: 0.75,
        },
      ],
      [
        {
          name: '广东',
          value: 0.78,
        },
      ],
      [
        {
          name: '海南',
          value: 0.1,
        },
      ],
      [
        {
          name: '新疆',
          value: 0,
        },
      ],
      [
        {
          name: '上海',
          value: 0.91,
        },
      ],
    ]

    var convertData = function (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        var fromCoord = chinaGeoCoordMap[dataItem[0].name]
        var toCoord = [113.12244, 23.009505] //目的点
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ])
        }
      }
      return res
    }
    var series = []
    ;[['广东', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push(
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: convertData(item[1]),
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13,
            },
            emphasis: {
              show: true,
            },
          },
          symbol: 'circle',
          symbolSize: function (val) {
            return 5 + val[2] * 5 //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#f00',
            },
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
            }
          }),
        },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4,
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: '#0f0',
              },
            },
            emphasis: {
              show: true,
              color: '#f60',
            },
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            },
          ],
        },
      )
    })
    const myChart = echarts.init(document.querySelector('.migrate_map'))
    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = ''
          var name = params.name
          var value = params.value[params.seriesIndex + 1]
          res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
          return res
        },
      },
      backgroundColor: '#013954',
      visualMap: {
        //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff',
        },
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1,
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)', //悬浮背景
          },
        },
      },
      series: series,
    }
    myChart.setOption(option)
  }
})
